<template>
  <div class="wrap">
    <div class="header">
      <!-- <div class="top">
        <p>当前连接设备：云-huaweiyun</p>
        <p class="bhg" @click="blueTooth">管理设备</p>
      </div>-->
      <!-- <div class="bot">
        <p>客户：13304981333/乔治马丁</p>
      </div>-->
      <div class="headers">
        <div class="left">
          <img :src="info.avatar" :onerror="defaultImg" class="headerUrl" alt />
          <div class="center">
            <div>
              <p>{{info.username}}</p>
              <span style="display:block;">{{info.account}}</span>
              <span>订单数：{{info.total}}</span>
            </div>
          </div>
        </div>
        <span style="display:block;color:#999;font-size: .426667rem;">供应商</span>
      </div>
    </div>

    <div class="centers">
      <div class="item" v-if="w_list">
        <div class="topappend">
          <p class="i-tit">等待发货</p>
          <div class="state">
            <p @click="send">发货</p>
            <!-- <img
              :src="w_list.radio?require('../assets/select.png'):require('../assets/radio.png')"
              @click="select(w_list)"
              class="radio"
              alt
            />-->
          </div>
        </div>
        <div class="itemrc" v-for="item in w_list.orderList" :key="item.order_id">
          <div class="item-left">
            <div class="remake">
              <img :src="item.order_image" @click="showMaxImg(item.order_image)" :onerror="defaultImg2" class="avi" alt />
            </div>
            <div class="productInfo">
              <p>
                客户：
                <i>{{item.customer_name}}</i>
              </p>
              <p>规格：{{item.order_size}}</p>
              <p>订单日期：{{item.create_time}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="item" v-if="y_list">
        <div class="topappend">
          <p class="i-tit">中通快递：{{y_list.waybill}}</p>
          <div class="state">
            <p @click="showInfo">查看</p>
            <!-- <img
              :src="y_list.radio?require('../assets/select.png'):require('../assets/radio.png')"
              @click="select(y_list)"
              class="radio"
              alt
            />-->
          </div>
        </div>

        <div class="itemrc" v-for="item in y_list.orderList" :key="item.order_id">
          <div class="item-left">
            <div class="remake">
              <img
                :src="item.order_image"
                @click="showMaxImg(item.order_image)"
                :onerror="defaultImg2"
                class="avi"
                alt
              />
            </div>
            <div class="productInfo">
              <p>
                客户：
                <i>{{item.customer_name}}</i>
              </p>
              <p>规格：{{item.order_size}}</p>
              <p>订单日期：{{item.create_time}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="footer">
      <div>
        <p class="btn" @click="next">打印快递单</p>
      </div>
      <div @click="allSelect">
        <p>全选</p>
        <img
          :src="stateRadio?require('../assets/select.png'):require('../assets/radio.png')"
          class="all"
          alt
        />
      </div>
    </div>-->
    <van-popup v-model="showMax">
      <img :src="showMaxSrc" class="maxImg" :onerror="defaultImg2" alt srcset />
    </van-popup>
  </div>
</template>
<style lang="scss" scoped>
.maxImg {
  width: 100%;
}
.wrap {
  background: #f7f7f7;
  width: 100%;
  height: 100vh;
}
.header {
  .top {
    background: #eeeded;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    p {
      font-size: 0.32rem;
      color: #555;
    }
    .bhg {
      border: 1px solid #a5a3a3;
      border-radius: 50px;
      padding: 2px 15px;
    }
  }
  .bot {
    height: 1.2rem;
    line-height: 1.2rem;
    color: #555;
    font-size: 0.32rem;
    text-align: left;
    padding: 0 15px;
    background: #fff;
  }
}
.headers {
  height: 2.186667rem;
  padding: 0 0.4rem 0.4rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;
  }
  .headerUrl {
    width: 1.466667rem;
    height: 1.466667rem;
    border-radius: 50%;
    display: block;
    margin-top: 0.373333rem;
    background: #f00;
  }
  .center {
    margin-left: 0.4rem;
    div {
      text-align: left;
      margin-top: 15px;
      p {
        color: #555;
        font-size: 0.48rem;
        text-align: left;
      }
      span {
        color: #999;
        font-size: 0.293333rem;
        text-align: left;
      }
      span:nth-of-type(1) {
        font-size: 0.426667rem;
      }
    }
    p {
      color: #555;
      font-size: 0.266667rem;
      text-align: left;
    }
  }
  .func {
    margin-top: 15px;
    p:nth-of-type(1) {
      width: 2.24rem;
      height: 0.6rem;
      border: 2px solid rgba(63, 217, 201, 1);
      color: #719bef;
      border-radius: 0.4rem;
      font-size: 0.373333rem;
      text-align: center;
      line-height: 0.6rem;
      margin-bottom: 0.266667rem;
    }
    p:nth-of-type(2) {
      width: 2.24rem;
      height: 0.6rem;
      background: rgba(63, 217, 201, 1);
      color: #fff;
      border-radius: 0.4rem;
      font-size: 0.373333rem;
      text-align: center;
      line-height: 0.6rem;
    }
  }
}
.topappend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .state {
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      color: #fff;
      font-size: 0.32rem;
      text-align: center;
      background: #719bef;
      border-radius: 50px;
      padding: 2px 20px;
      margin-right: 8px;
      font-weight: normal;
    }
    .radio {
      width: 0.453333rem;
      height: 0.453333rem;
      border-radius: 50%;
      display: block;
      margin-right: 0.3rem;
    }
  }
}

.centers {
  position: absolute;
  top: 3rem;
  bottom: 1.2rem;
  left: 0;
  right: 0;
  overflow-y: scroll;
  .item {
    width: 9.466667rem;
    min-height: 3rem;
    border-radius: 0.266667rem;
    background: #fff;
    margin: 0.186667rem auto 0;
    overflow: hidden;

    padding: 0.2rem 0;
    .itemrc {
      display: flex;
      justify-content: space-between;
    }
    .item-left {
      display: flex;
    }
    .i-tit {
      color: #555;
      font-size: 0.346667rem;
      font-weight: bold;
      text-align: left;
      margin-left: 8px;
    }
    .avi {
      width: 2rem;
      height: 2rem;
      border-radius: 0.266667rem;
      margin: 0.173333rem 0.306667rem 0 8px;
      display: block;
      object-fit: cover;
    }
    .productInfo {
      margin-top: 0.55rem;
      p {
        color: #555;
        font-size: 0.32rem;
        text-align: left;
        i {
          font-style: normal;
          color: #719bef;
          font-size: 0.4rem;
        }
      }
      p:nth-of-type(2) {
        margin-top: 0.133333rem;
        margin-bottom: 0.186667rem;
      }
    }
  }
}
.footer {
  background: #fff;
  position: fixed;
  bottom: 0;
  height: 1.2rem;
  width: 100%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  div {
    display: flex;
    align-items: center;
  }
  .btn {
    background: #719bef;
    color: #fff;
    padding: 0 10px;
    height: 0.8rem;
    border-radius: 0.373333rem;
    font-size: 0.32rem;
    margin-left: 0.733333rem;
    margin-right: 0.266667rem;
    line-height: 0.8rem;
  }
  .all {
    width: 0.453333rem;
    height: 0.453333rem;
    border-radius: 50%;
    display: block;
    margin-right: 0.533333rem;
    margin-left: 0.533333rem;
  }
}
</style>
<script>
import { getProxyOrderList } from "@/utils/interface";
import { Dialog } from "vant";

export default {
  data() {
    return {
      info: {},
      list: [],
      w_list: null,
      y_list: null,
      stateRadio: false,
      defaultImg2: 'this.src="' + require("../assets/timg.jpg") + '"',
      defaultImg: 'this.src="' + require("../assets/user.png") + '"',
      showMax: false,
      showMaxSrc: ""
    };
  },
  created() {
    document.title = "取货单";
    if (this.$route.query.user_id) {
      this.info = JSON.parse(this.$route.query.user_id);
      this.getProxyOrderList(this.info.account);
    }
  },
  methods: {
    showMaxImg(s) {
      this.showMaxSrc = s;
      this.showMax = true;
    },
    blueTooth() {
      this.$router.push("/Bluetooth");
    },
    send() {
      Dialog({ message: "功能正在建设，敬请期待" });
      return false;
      this.$router.push({
        path: "submitOrder",
        query: {
          info: JSON.stringify(this.info),
          list: JSON.stringify(this.w_list),
          state: 0
        }
      });
    },
    showInfo() {
      this.$router.push("/mySendOrderDetail");
    },
    next() {},
    getProxyOrderList(account) {
      getProxyOrderList({ account }).then(res => {
        res.data.data.map(item => {
          item.radio = false;
          if (item.is_sent == 0) {
            this.w_list = item;
          }
          if (item.is_sent == 1) {
            this.y_list = item;
          }
        });
      });
    },
    allSelect() {
      this.stateRadio = !this.stateRadio;
      if (this.stateRadio) {
        this.w_list.radio = true;
        this.y_list.radio = true;
      } else {
        this.w_list.radio = false;
        this.y_list.radio = false;
      }
    },
    select(i) {
      i.radio = !i.radio;
    }
  }
};
</script>